Skip to content

Feat: 토스 페이 연동 [JDDEV-73] - #118

Merged
yiyoonseo merged 1 commit into
developfrom
feature/JDDEV-73-tosspay-fix
Jul 31, 2026
Merged

Feat: 토스 페이 연동 [JDDEV-73]#118
yiyoonseo merged 1 commit into
developfrom
feature/JDDEV-73-tosspay-fix

Conversation

@yiyoonseo

@yiyoonseo yiyoonseo commented Jul 31, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

🔗 관련 이슈

JDDEV-73

  • Close #

📝 개요

  • 토스페이 연동

⌨️ 작업 상세 내용

  • 토스페이 연동했습니다.

💡 코드 설명 및 참고사항

1. 포트원 결제 SDK 연동 및 플로우 구현

  • src/lib/api/credit.ts 내 결제 준비(preparePurchase), 결제 요청(requestPortOnePayment), 결제 검증(completePortOnePayment) API 통신 로직 구현
  • 결제창 호출 시 누락되었던 환경변수 및 키값 맵핑 로직 수정

2. Next.js App Router 기반 결제 리다이렉트 페이지 추가

  • PG사 결제 완료/취소 후 프론트엔드로 복귀할 처리용 라우트 추가
  • src/app/credit/payment-result/page.tsx: 결제 완료 시 orderId를 파싱하여 메인 크레딧 페이지로 전달
  • src/app/credit/payment-cancel/page.tsx: 사용자의 결제 취소 시 cancel=true 플래그를 달아 복귀 처리

3. 상태 기반 결제 결과 폴링(Polling) 로직 구현 (`CreditContent`)

  • 결제 완료 후 넘어온 orderId를 감지하여 2초 주기로 백엔드에 결제 상태(checkPaymentStatus) 확인
  • 폴링 중 발생할 수 있는 일시적인 API 에러(4xx, 5xx)로 인해 Next.js Error Overlay(빨간 화면)가 뜨지 않도록 예외 처리(Error throw 대신 UNKNOWN 상태 반환) 적용

4. Zustand를 활용한 크레딧 잔액 전역 상태 관리

  • src/store/useCreditStore.ts 생성하여 크레딧 상태 중앙화
  • 결제 완료(COMPLETED) 시 fetchCreditBalance를 호출해 최신 잔액을 가져온 뒤 스토어 업데이트
  • Lnb 컴포넌트 등 크레딧 잔액을 표시하는 모든 컴포넌트가 새로고침 없이 즉시 리렌더링되도록 UX 개선

5. UI/UX 개선 (Toast 알림 적용)

  • 투박한 alert 대신 Toast 컴포넌트를 활용하여 성공/실패/취소 알림 적용
  • useEffect 내부의 동기적 상태 업데이트로 인한 React 렌더링 경고(Cascading renders)를 해결하기 위해 setTimeout을 활용한 비동기 알림 처리 적용

📸 스크린샷 (UI 변경 시)

🔍 리뷰 요구사항 (Reviewers)

  • [ ]

⚠️ 로컬 실행 시 유의사항

Summary by CodeRabbit

  • New Features

    • Added payment result and cancellation pages with clear processing, success, and cancellation states.
    • Added synchronized credit balance updates across the navigation and credit purchase flows.
    • Added toast notifications for payment success, failure, cancellation, and balance synchronization issues.

  • Bug Fixes

    • Improved payment-status polling and handling of unsuccessful API responses.
    • Preserved meaningful payment error messages while providing a fallback for unknown errors.

@yiyoonseo
yiyoonseo merged commit ffb2f88 into develop Jul 31, 2026
1 check was pending
@coderabbitai

coderabbitai Bot commented Jul 31, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 9b3b581f-00ec-4606-a6e4-80a1d9605d24

📥 Commits

Reviewing files that changed from the base of the PR and between 0d72eef and 1c4bab9.

⛔ Files ignored due to path filters (1)
  • jobdri/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (8)
  • jobdri/package.json
  • jobdri/src/app/credit/page.tsx
  • jobdri/src/app/credit/payment-cancel/page.tsx
  • jobdri/src/app/credit/payment-result/page.tsx
  • jobdri/src/components/common/cards/CreditCard.tsx
  • jobdri/src/components/common/lnb/Lnb.tsx
  • jobdri/src/lib/api/credit.ts
  • jobdri/src/lib/store/useCreditStore.ts
📝 Walkthrough

Walkthrough

The credit payment flow now uses checkout URLs, dedicated result and cancellation routes, payment-status polling, toast feedback, and shared Zustand credit balance state.

Changes

Credit payment flow

Layer / File(s) Summary
Payment contracts and credit state
jobdri/package.json, jobdri/src/lib/api/credit.ts, jobdri/src/lib/store/useCreditStore.ts		 Added Zustand. Updated payment result data and status-check behavior. Added shared credit balance state.
Checkout and payment result routes
jobdri/src/components/common/cards/CreditCard.tsx, jobdri/src/app/credit/payment-result/page.tsx, jobdri/src/app/credit/payment-cancel/page.tsx		 The purchase flow uses the returned checkout URL. Result and cancellation routes redirect to the credit page with payment state.
Credit polling and shared balance display
jobdri/src/app/credit/page.tsx, jobdri/src/components/common/lnb/Lnb.tsx		 Payment polling uses paymentId. Successful payments refresh shared credit state. Toast feedback replaces payment alerts. Lnb reads the shared balance.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant CreditCard
  participant PaymentResultPage
  participant CreditPage
  participant PaymentAPI
  participant CreditStore
  CreditCard->>PaymentResultPage: Redirect using checkoutPage
  PaymentResultPage->>CreditPage: Redirect with payment identifier
  CreditPage->>PaymentAPI: Poll payment status with paymentId
  PaymentAPI-->>CreditPage: Return payment status
  CreditPage->>CreditStore: Store refreshed credit balance
Loading

Possibly related issues

Possibly related PRs

Suggested labels: 🎨 UI, ⭐ Feature

Suggested reviewers: minnngo

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/JDDEV-73-tosspay-fix

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@yiyoonseo